.layout {
  padding: 0.46875rem;
  width: 100%;
  box-sizing: border-box;
}
.layout .vote {
  width: 100%;
  padding-top: 1.21875rem;
}
.layout .vote .vote-info {
  text-align: center;
  margin-bottom: 0.875rem;
}
.layout .vote .vote-info .vote-info-header {
  display: inline-block;
}
.layout .vote .vote-info .vote-info-header .vote-info-header-left {
  width: 2.71875rem;
  height: 2.71875rem;
  border-radius: 50%;
  overflow: hidden;
  float: left;
}
.layout .vote .vote-info .vote-info-header .vote-info-header-left > img {
  width: 100%;
  height: 100%;
}
.layout .vote .vote-info .vote-info-header .vote-info-header-right {
  float: left;
  margin-left: 0.84375rem;
  text-align: left;
}
.layout .vote .vote-info .vote-info-header .vote-info-header-right > h2 {
  font-size: 0.875rem;
  margin-bottom: 0.34375rem;
  margin-top: 0.1875rem;
}
.layout .vote .vote-info .vote-info-header .vote-info-header-right > p {
  font-size: 0.6875rem;
}
.layout .vote .vote-info .vote-info-num {
  padding: 0.5625rem 0 1rem;
  border-top: 2px solid #D8D8D8;
  width: 100%;
  box-sizing: border-box;
  font-size: 0.625rem;
}
.layout .vote .vote-info .vote-info-num > span {
  width: 32.6%;
  display: inline-block;
}
.layout .vote .vote-info .vote-info-num > span > i {
  color: red;
}
.layout .vote .vote-info .vote-info-text {
  width: 100%;
  background-color: #fff;
  padding: 0.84375rem;
  font-size: 0.6875rem;
  box-sizing: border-box;
}
.layout .vote .vote-info .vote-info-text > span:first-of-type {
  color: #707070;
}
.layout .vote .vote-info .vote-info-text > span:last-of-type {
  color: #ABABAB;
}
.layout .vote .vote-btn {
  width: 100%;
  padding: 0 0.875rem;
  box-sizing: border-box;
  text-align: center;
}
.layout .vote .vote-btn > button {
  width: 100%;
  height: 2.03125rem;
  background-color: #617AF9;
  border-radius: 5px;
  color: #fff;
  font-size: 0.75rem;
}
.layout .vote .vote-btn > span {
  color: red;
  font-size: 0.6875rem;
}
.layout .works {
  width: 100%;
  margin-top: 2.375rem;
}
.layout .works > h3 {
  font-size: 0.71875rem;
}
.layout .works .works-box {
  width: 100%;
  padding: 0.3125rem;
  box-sizing: border-box;
  background-color: #fff;
}
.layout .works .works-box > img {
  width: 33.33%;
  height: 8rem;
  display: block;
  border-radius: 5px;
  padding: 0.3125rem;
  box-sizing: border-box;
  float: left;
}
.layout .works .works-vote {
  font-size: 0.6875rem;
  padding: 0.8125rem 0.34375rem;
  border-bottom: 1px solid #DADADA;
}
.layout .works .works-vote .works-vote-left {
  float: left;
}
.layout .works .works-vote .works-vote-left > span {
  display: block;
}
.layout .works .works-vote .works-vote-left > span > i {
  color: red;
}
.layout .works .works-vote .works-vote-right {
  width: 6.46875rem;
  float: right;
}
.layout .works .works-vote .works-vote-right > .vote-right-img {
  width: 14%;
  height: 2.03125rem;
  float: left;
  border-radius: 50%;
}
.layout .works .works-vote .works-vote-right > .vote-right-img > img {
  width: 2.03125rem;
  height: 2.03125rem;
  display: block;
  border-radius: 50%;
}
.layout .works > p {
  text-align: center;
  font-size: 0.8125rem;
  margin: 0.9375rem 0 1.3125rem;
}
.layout .works > p > i {
  color: red;
}
.layout .works .list-btn-box {
  text-align: center;
}
.layout .works .list-btn-box > .list-btn {
  display: inline-block;
  color: #fff;
  border-radius: 5px;
  background-color: red;
  padding: 0.3125rem 1rem;
  font-size: 0.84375rem;
}
.layout .works .list-btn-box > .list-btn > span {
  font-family: SimSun;
  font-weight: bold;
}
.layout .message {
  width: 100%;
  padding-top: 1.6875rem;
  margin-bottom: 5rem;
}
.layout .message .message-title > h3 {
  font-size: 0.75rem;
  float: left;
  line-height: 1.625rem;
  margin-left: 0.4375rem;
}
.layout .message .message-title > .message-me {
  float: right;
  color: #617AF9;
  display: inline-block;
  border: 1px solid #617AF9;
  border-radius: 5px;
  font-size: 0.6875rem;
  padding: 0.3125rem 1rem;
}
.layout .message .message-box {
  background-color: #fff;
  border-radius: 3px;
  padding: 0.15625rem 0.6875rem;
  margin-top: 0.75rem;
  width: 100%;
  box-sizing: border-box;
  font-size: 0.6875rem;
}
.layout .message .message-box .message-box-list {
  padding: 0.53125rem 0;
  border-bottom: 1px solid #D0D0D0;
}
.layout .message .message-box .message-box-list > span:nth-of-type(2) {
  float: right;
  color: #B0B0B0;
}
.layout .message .message-box .message-box-list > p {
  color: #000;
  margin-top: 0.4375rem;
}
.layout .personnel-list-fixed {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 1rem 1.46875rem;
  background-color: rgba(0, 0, 0, 0.7);
  box-sizing: border-box;
}
.layout .personnel-list-fixed > a {
  display: block;
  width: 7.625rem;
  height: 2.40625rem;
  line-height: 2.40625rem;
  text-align: center;
  color: red;
  border: 1px solid red;
  box-sizing: border-box;
  border-radius: 8px;
  font-size: 0.875rem;
  background-color: #fff;
}
.layout .personnel-list-fixed > a:first-of-type {
  float: left;
}
.layout .personnel-list-fixed > a:last-of-type {
  float: right;
}
.layout .personnel-list-fixed > a:hover,
.layout .personnel-list-fixed > a:focus {
  color: #fff;
  background-color: red;
}
.message-inp {
  background-color: rgba(0, 0, 0, 0.5);
  padding: 1.40625rem 0.46875rem 1.0625rem;
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
}
.message-inp .message-inp-left {
  font-size: 0.75rem;
  color: #fff;
  float: left;
}
.message-inp .message-inp-right {
  float: left;
  width: 12.28125rem;
  height: 5.34375rem;
  margin-left: 1rem;
  margin-bottom: 1rem;
  position: relative;
}
.message-inp .message-inp-right textarea {
  width: 100%;
  height: 100%;
  padding: 0.5rem;
  box-sizing: border-box;
  border-radius: 5px;
  background-color: #F3F3F3;
}
.message-inp .message-inp-right textarea + span {
  font-size: 0.5625rem;
  color: #AFAFAF;
  position: absolute;
  bottom: .5rem;
  right: .5rem;
}
.message-inp .message-inp-right textarea + span i {
  color: #617AF9;
}
.message-inp .inp-sure {
  width: 6.59375rem;
  height: 2rem;
  display: block;
  margin: 0 auto;
  border-radius: 5px;
  background-color: #617AF9;
  color: #fff;
}
.message-inp .message-close {
  color: #fff;
  position: absolute;
  right: 0.875rem;
  top: 0.65625rem;
}
#share {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  position: absolute;
  top: 0;
  left: 0;
  color: #fff;
  font-size: 0.8125rem;
  text-align: center;
}
#share .share-allow {
  width: 3.25rem;
  height: 3.25rem;
  background: url("../images/share-allow.png") no-repeat center;
  background-size: 3.25rem 3.25rem;
  position: absolute;
  right: 1rem;
  top: 0.15625rem;
}
#share p {
  margin: 3.46875rem 3.5rem 0.3125rem;
}
#share p + span {
  font-size: 0.6875rem;
}
.popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  display: none;
}
.popup .popup-box {
  width: 16.46875rem;
  height: 23.84375rem;
  background: url("../images/popup.png") no-repeat center;
  background-size: 16.46875rem 23.84375rem;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -55%);
}
.popup .popup-box > #close {
  width: 1.875rem;
  height: 1.875rem;
  background: url("../images/close.jpg") no-repeat center;
  background-size: 1.875rem 1.875rem;
  position: absolute;
  top: 0.8125rem;
  right: 0.75rem;
}
.popup .popup-box > h2 {
  font-size: 1.09375rem;
  text-align: center;
  color: #000;
  margin: 1.5625rem 0 0.78125rem;
}
.popup .popup-box .redbag {
  width: 7.875rem;
  height: 11.59375rem;
  background: url("../images/redbag.png") no-repeat center;
  background-size: 7.875rem 11.59375rem;
  margin: 0 auto 1rem;
  text-align: center;
}
.popup .popup-box .redbag #qrcode > img {
  width: 6.8125rem;
  height: 6.8125rem;
  display: block;
  margin: 4.125rem auto 0.875rem;
}
.popup .popup-box dl {
  margin-left: 1.625rem;
  font-size: 0.8125rem;
  line-height: 1.25rem;
}
.popup .popup-box dl dt {
  color: #617AF9;
}
.popup .popup-box dl dd {
  font-size: 0.6875rem;
}
.popup .save-pic {
  width: 7.78125rem;
  height: 1.59375rem;
  line-height: 1.59375rem;
  text-align: center;
  color: #000;
  display: block;
  background-color: #fff;
  border-radius: 5px;
  margin: 0 auto;
  font-size: 0.6875rem;
  position: absolute;
  bottom: 1.25rem;
  left: 50%;
  transform: translateX(-50%);
}
#preview-img {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: #000;
  display: none;
}
#preview-img > img {
  max-width: 100%;
  max-height: 100%;
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
